<template>
	<view >
		<view :style="{'border-left':`${borderWidth == null?'1vmin':borderWidth} solid ${borderColor==null?'#98c365':borderColor}`}" >
			<view :style="{...labelStyle,...{'margin-left':`${labelLeftMargin == null?'1vmin':labelLeftMargin}`}}"  class="flex-center" style="justify-content: start;"  >
				<view :style="{'width':`${labelWidth == null?'fit-content':labelWidth}`}" style="overflow: hidden;">
					{{label}}
				</view>
				<slot name="labelRight">
				</slot>
			</view>
		</view>
<!-- 		<view :style="{'margin-left':`calc( ${labelLeftMargin == null?'1vmin':labelLeftMargin} + ${borderWidth == null?'1vmin':borderWidth} )`}">
			<slot name="default">
			</slot>
		</view> -->
	</view>
</template>

<script>
	export default {
		name:"light-box",
		data() {
			return {
				
			};
		},
		props:["label","labelWidth","borderWidth","borderColor","labelLeftMargin","labelStyle"]
	}
</script>

<style>

</style>
